<template>
    <div class="comment-container">
    <div class="comments">
          <ul>
            <li v-for="(comment, index) in comments" :key="index">
              <div class="comment-item">{{ comment.CommentContent }}</div>
            </li>
          </ul>
    </div>
  </div>
  <div class="comment-form">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" @submit.prevent="addComment">
      <el-form-item label="评论内容" prop="commentContent">
        <el-input type="textarea" v-model="form.commentContent"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addComment">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: 'Comment',
        data() {
            return {
                form: {
                    commentContent: '',
                },
                rules: {
                    commentContent: [
                        { required: true, message: '请输入评论内容', trigger: 'blur' },
                        { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger:'blur' }
                    ]
                }
            }
        },
        methods: {
        addComment() {
        this.$refs.formRef.validate((valid) => {
            if (valid) {
            this.addBlog();
            } else {
            ElMessage.error("表单验证失败");
            }
        });
        },
        async addBlog() {
        try {
            const response = await instance.post("//myinfo/blog/addcomment/${}", {
            title: this.form.title,
            content: this.form.content,
            });
            if (!response.data.status) {
            ElMessage.success("提交成功");
            this.$router.push('/home'); // 提交成功后跳转到首页
            } else {
            ElMessage.error("不符合");
            }
        } catch (error) {
            console.error("提交失败", error);
            ElMessage.error("请求失败");
        }
        }
    },

    }
</script>

<style>

</style>